<template>
  <div class="index">
    <div class="loginForm">

      <!--登录logo-->
      <div class="headerImage">
        <img src="../../build/logo.png"></img>
      </div>

      <!--登陆表单-->
      <el-form class="elForm" :model="formData" :rules="rules" ref="elForm">

        <el-form-item prop="username">
          <el-input v-model="formData.username" placeholder="请输入内容" prefix-icon="el-icon-user"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="formData.password" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password></el-input>
        </el-form-item>
     
        <el-form-item class="formButton">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      formData:{
      username:'',
      password:''},
      rules:{
        username:[
          { required:true,message:'请输入用户名',trigger:'blur'},
          ],
        password:[
          { required:true,message:'请输入密码',trigger:'blur'},
          { min:6,max:12,message:'密码最少六个字符最多12个字符',trigger:'blur'}
                  ]
            }
            }
          },
  methods:{
    reset(){
      this.$refs.elForm.resetFields()
    },
    login(){
     
     var result = this.$http.post('login',this.formData)
     result.then(data =>{
       console.log(data)
       if(data.data.meta.status == 200){
         this.$message.success('登录成功')
         this.$router.push("/home")
         sessionStorage.setItem('token',data.data.data.token)
       }else{
         this.$message.error('登陆失败')
       }
     })
    }
  }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index{
  height:100%;
  background:#2b4b6b;
}
.loginForm{
  position:absolute;
  width:500px;
  height:300px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:white;
}
.headerImage{
  border:1px solid #eee; 
  border-radius:50%;
  width:130px;
  height:130px;
  padding:10px;
  position:absolute;
  left:50%;
  transform:translate(-50%,-50%);
  background:white;
  box-shadow:0 0 10px #eee;
}
img{
  width:100%;
  border-radius:50%;
  background:#eee;
}
.elForm{
  position:absolute;
  bottom:0px;
  width:100%;
  padding:0 20px;
  box-sizing:border-box;
}
.formButton{
  display:flex;
  justify-content:flex-end;
}
</style>
